<template>
  <div class="login-container">
    <div class="login-box">
      <div class="left-box">{{ title }}</div>
      <div class="right-box">
        <div class="title-container">
          <p class="tips">欢迎登录</p>
          <h3 class="title">{{ title }}</h3>
        </div>
        <div class="right-box-title">账号密码登录</div>
        <a-form-model ref="form" :rules="rules" :model="loginForm">
          <a-form-model-item prop="userAccount" class="form-item">
            <a-input
              ref="userAccount"
              class="form-input"
              v-model="loginForm.userAccount"
              placeholder="请输入账号"
              @keydown.tab="handleTab"
            />
          </a-form-model-item>

          <a-form-model-item prop="userPassword" class="form-item">
            <a-input-password
              ref="userPassword"
              type="password"
              class="form-input-password"
              v-model="loginForm.userPassword"
              autocomplete="on"
              tabindex="2"
              @keyup.native="checkCapslock"
              @blur="capsTooltip = false"
              @keyup.enter.native="onSubmit"
              placeholder="请输入密码"
            />
          </a-form-model-item>

          <div>
            <u-button
              :loading="loading"
              class="form-btn"
              block
              @click="onSubmit"
            >
              登录
            </u-button>
          </div>
        </a-form-model>
      </div>
    </div>
  </div>
</template>

<script>
import config from "@/config";
import { validatePassword, validateUsername } from "@/utils/validate";

export default {
  data() {
    return {
      title: config.title,
      loginForm: {
        userAccount: "",
        userPassword: "",
      },
      rules: {
        userAccount: [
          { required: true, message: "请输入账号" },
          { trigger: "change", validator: validateUsername },
        ],
        userPassword: [
          { required: true, message: "请输入密码" },
          { trigger: "change", validator: validatePassword },
        ],
      },
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
    };
  },
  methods: {
    handleTab(e) {
      e.preventDefault();
      this.$refs.userPassword.focus();
    },
    onSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          if (
            this.$store.state.users.find(
              (user) =>
                user.userAccount === this.loginForm.userAccount &&
                user.password === this.loginForm.userPassword
            )
          ) {
            localStorage.setItem("username", this.loginForm.userAccount);
            localStorage.setItem("password", this.loginForm.userPassword);
            this.$store.dispatch("login", {
              username: this.loginForm.userAccount,
              password: this.loginForm.userPassword,
            });
            this.$router.push({
              path: this.redirect || "/",
              query: this.otherQuery,
            });
          } else {
            this.$message.error("账号或者密码输入错误");
          }
          this.loading = false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    checkCapslock(e) {
      const { key } = e;
      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
          // eslint-disable-next-line no-undef
        }
        return acc;
      }, {});
    },
  },
  mounted() {
    if (this.loginForm.username === "") {
      this.$refs.username.focus();
    } else if (this.loginForm.password === "") {
      this.$refs.password.focus();
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100%;
  width: 100%;
  background-color: #2d3a4b;
  overflow: hidden;
  background-image: url("../../assets/login-bg-main.jpg");
  background-size: cover;
  background-repeat: no-repeat;

  .login-box {
    width: 940px;
    height: 636px;
    background-image: url("../../assets/login-box.png");
    position: absolute;
    top: 55%;
    left: 72%;
    transform: translate(-50%, -50%);
    display: flex;
  }

  .left-box {
    text-align: center;
    width: 50%;
    margin-top: 130px;
    font-size: 38px;
    line-height: 42px;
    color: #fff;
  }

  .right-box {
    position: relative;
    padding: 145px 30px 0;
    box-sizing: border-box;
    width: 50%;

    .right-box-title {
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      margin-bottom: 38px;
      font-size: 20px;
      line-height: 20px;
      color: #6d6d6d;
    }

    .form-item {
      margin-bottom: 28px;

      &:nth-child(2) {
        margin-bottom: 36px;
      }
    }

    :deep .ant-form-explain {
      position: absolute;
      bottom: -24px;
    }

    .form-input {
      width: 412px;
      height: 57px;
      border: 1px solid #d1d3d9;
      border-radius: 12px;
      padding: 0 28px;
      box-sizing: border-box;
      font-size: 20px;
      color: #1b1b1b;

      &::-webkit-input-placeholder {
        font-size: 20px;
        color: #a0a3ae;
        line-height: 20px;
      }
    }

    .form-input-password :deep .ant-input {
      width: 412px;
      height: 57px;
      border: 1px solid #d1d3d9;
      border-radius: 12px;
      padding: 0 28px;
      box-sizing: border-box;
      font-size: 20px;
      color: #1b1b1b;

      &::-webkit-input-placeholder {
        font-size: 20px;
        color: #a0a3ae;
        line-height: 20px;
      }
    }

    .form-btn {
      cursor: pointer;
      width: 413px;
      height: 56px;
      line-height: 56px;
      border-radius: 12px 12px 12px 12px;
      overflow: hidden;
      font-size: 22px;
      color: #fff;
    }

    .footer-text {
      position: absolute;
      text-align: center;
      width: 100%;
      bottom: 15px;

      .footer-text-item {
        margin-top: 7px;
        font-size: 14px;
        line-height: 15px;
        color: #999daa;
      }
    }
  }
}
</style>
